<template>
  <div class="agency">
    <div class="back">
      <van-icon name="arrow-left"
                size="0.8rem"
                class="back-icon"
                @click="goback()" />
      <p class="title">救助机构</p>
    </div>
    <div class="content">
      <heart :aixin = "aixin" class="aixin" @changeaixin="aixinevent($event)"></heart>
      <div class="best-agency"></div>
      <div class="agency-info">
        <div class="agency-item"
             v-for="(agencyItem, index) in agency"
             :key="index" @click="gotoAgency(agencyItem.id)">
          <img :src="JSON.parse(agencyItem.img)[0]"
               alt=""
               class="agency-img">
               
          <div class="agency-item-content">
            <p>{{agencyItem.name}}</p>
            <!-- <svg class="icon agency-icon love" aria-hidden="true" v-show="agencyItem.status === 2 " @click.stop="dianzan(index,agencyItem.status,agencyItem.aid)">
              <use xlink:href="#icon-shoucang1"></use>
            </svg>
            <svg class="icon agency-icon love" aria-hidden="true" v-show="agencyItem.status === 1 " @click.stop="dianzan(index,agencyItem.status,agencyItem.aid)">
                    <use xlink:href="#icon-aixin1"></use>
            </svg> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getMechanismList,updateLike } from '@/api.js'
import Heart from '@/components/heart.vue'
export default {
  data () {
    return {
      agency: [],
      like:false,
      aixin:false
    }
  },
  components: {
    Heart
  },
  created () {
    this.getAgencyInfo()
  },
  methods: {
      aixinevent(msg) {
        this.aixin = msg
      },
    //点赞 
      async dianzan(index,status,aid) {
      if (status === 1){ 
        this.agency[index].status =2; 
        this.aixin = false 
      }else if(status === 2){ 
        this.agency[index].status =1; 
        this.aixin = true 
        }
      let params = {aid,user_id:JSON.parse(localStorage.getItem('user')),status:this.agency[index].status}
      const { data } =await updateLike(params)
    },
    gotoAgency(aid) {
     this.$router.push('/agency/'+aid)
    },
    goback () {
      this.$router.go(-1)
    },
    async getAgencyInfo () {
      const { data } = await getMechanismList()
      this.agency = data
    }
  }
}
</script>
<style lang="less" scoped>
.agency {
  overflow: hidden;
  .back {
    background: white;
    position: fixed;
    width: 100%;
    padding: 0.5rem 0.5rem 0.3rem;
    justify-content: center;
    display: flex;
    align-items: center;
    .back-icon {
      position: absolute;
      left: 0.25rem;
    }
    .title {
      font-size: 0.5rem;
      color: #38383b;
      font-weight: bold;
    }
  }
  .content {
    margin-top: 1.2rem;
    padding: 0.5rem 0.5rem;
    .aixin{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

    }
    .agency-info {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .agency-item {
        width: 48.5%;
        height: 5rem;
        overflow: hidden;
        margin-bottom: 0.5rem;
        .agency-img {
          width: 120%;
          height: 4rem;
        }
        .agency-item-content {
          display: flex;
          font-size: 0.4rem;
          font-weight: bold;
          padding: 0.2rem 0.1rem;
          justify-content: space-between;
          align-items: center;
          .agency-icon {
            width: 0.7rem;
            height: 0.55rem;
          }
          @keyframes hovermove {
              from {width: 0;}
              to {width: 0.55rem;}
            }
            .love{
              width: 0.55rem;
              animation: hovermove 0.3s;
            }
        }
        .rest {
          font-size: 0.3rem;
          padding-left: 0.1rem;
        }
      }
    }
  }
}
</style>